<template>
  <div class="index">
    <!-- 导航栏 -->
    <van-nav-bar left-text="结婚服务全能助手" fixed>
      <template #right>
        <van-icon name="chat-o" size="18" />
      </template>
    </van-nav-bar>
    <div class="search">
      <!-- 顶部搜索框 -->
      <van-search
        v-model="value"
        show-action
        label="郑州  ∨"
        placeholder="请输入搜索关键词"
      >
        <template #action>
          <van-icon name="search" size="18px" />
        </template>
      </van-search>
    </div>
    <div class="body">
      <div class="grid">
        <van-grid :column-num="5">
          <van-grid-item icon="/img/shouye/1.png" text="婚纱照" />
          <van-grid-item icon="/img/shouye/2.png" text="热门旅拍" />
          <van-grid-item icon="/img/shouye/3.png" text="婚宴酒店" />
          <van-grid-item icon="/img/shouye/4.png" text="婚礼策划 " />
          <van-grid-item icon="/img/shouye/5.png" text="婚租车" />
          <van-grid-item icon="/img/shouye/6.png" text="婚纱礼服" />
          <van-grid-item icon="/img/shouye/7.png" text="婚礼主持" />
          <van-grid-item icon="/img/shouye/8.png" text="婚礼跟妆" />
          <van-grid-item icon="/img/shouye/9.png" text="婚礼摄影" />
          <van-grid-item icon="/img/shouye/10.png" text="全部商家" />
        </van-grid>
      </div>
      <div class="tabs">
        <van-tabs v-model="active1" sticky offset-top="46px">
          <van-tab title="精选">
            <div class="img" v-for="(item, i) in img" :key="i.id">
              <img :src="item" alt="" />
            </div>
          </van-tab>
          <van-tab title="发现">
            <div class="img" v-for="(item, i) in img1" :key="i.id">
              <img :src="item" alt="" />
            </div>
          </van-tab>
          <van-tab title="婚照">
            <div class="img" v-for="(item, i) in img2" :key="i.id">
              <img :src="item" alt="" />
            </div>
          </van-tab>
          <van-tab title="旅拍">
            <div class="img" v-for="(item, i) in img3" :key="i.id">
              <img :src="item" alt="" />
            </div>
          </van-tab>
          <!-- <van-tab title="婚庆"> </van-tab> -->
          <van-tab title="婚宴">
            <van-card
              v-for="j in hunyan"
              :key="j.id"
              :price="j.price + '/桌 起'"
              :desc="j.desc"
              :title="j.title"
              :thumb="j.thumb"
            >
              <template #tags>
                <van-tag plain type="danger">{{ j.tags }}</van-tag>
              </template>
            </van-card>
            <van-card
              v-for="j in hunyan"
              :key="j.lid"
              :price="j.price + '/桌 起'"
              :desc="j.desc"
              :title="j.title"
              :thumb="j.thumb"
            >
              <template #tags>
                <van-tag plain type="danger">{{ j.tags }}</van-tag>
              </template>
            </van-card>
          </van-tab>
          <van-tab title="婚纱">
            <div class="img" v-for="(item, i) in img3" :key="i.id">
              <img :src="item" alt="" />
            </div>
          </van-tab>
          <van-tab title="婚戒">
            <div class="img" v-for="(item, i) in img4" :key="i.id">
              <img :src="item" alt="" />
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 底部导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/linggan" icon="search">婚礼灵感</van-tabbar-item>
      <van-tabbar-item to="/yongpin" icon="shop-o">结婚用品</van-tabbar-item>
      <van-tabbar-item to="/carts" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item to="/me" icon="friends-o">我们</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      value: "",
      active1: 5,
      img: [
        "/img/linggan3/1.jpg",
        "/img/linggan3/2.jpg",
        "/img/linggan3/3.jpg",
        "/img/linggan3/4.jpg",
        "/img/linggan3/5.jpg",
        "/img/linggan3/6.jpg",
        "/img/linggan3/7.jpg",
        "/img/linggan3/8.jpg",
      ],
      img1: [
        "/img/linggan3/2.jpg",
        "/img/linggan3/3.jpg",
        "/img/linggan3/6.jpg",
        "/img/linggan3/8.jpg",
        "/img/linggan3/1.jpg",
        "/img/linggan3/5.jpg",
        "/img/linggan3/7.jpg",
        "/img/linggan3/4.jpg",
      ],
      img2: [
        "/img/linggan3/3.jpg",
        "/img/linggan3/6.jpg",
        "/img/linggan3/8.jpg",
        "/img/linggan3/2.jpg",
        "/img/linggan3/5.jpg",
        "/img/linggan3/1.jpg",
        "/img/linggan3/7.jpg",
        "/img/linggan3/4.jpg",
      ],
      img3: [
        "/img/linggan3/5.jpg",
        "/img/linggan3/3.jpg",
        "/img/linggan3/7.jpg",
        "/img/linggan3/6.jpg",
        "/img/linggan3/2.jpg",
        "/img/linggan3/1.jpg",
        "/img/linggan3/8.jpg",
        "/img/linggan3/4.jpg",
      ],
      img4: [
        "/img/linggan4/1.jpg",
        "/img/linggan4/2.jpg",
        "/img/linggan4/3.jpg",
        "/img/linggan4/4.jpg",
        "/img/linggan4/5.jpg",
        "/img/linggan4/6.jpg",
        "/img/linggan4/7.jpg",
        "/img/linggan4/8.jpg",
      ],
      hunyan: [
        {
          id: 1,
          num: "3km",
          desc: "二七区|京广路",
          price: "1399.00",
          title: "雲宴喜堂",
          thumb: "/img/jiudian/1.jpg",
          tags: "婚礼一站式服务",
        },
        {
          id: 2,
          num: "4.7km",
          desc: "二七区|齐礼阎",
          price: "1198.00",
          title: "郑州鸿禧堂婚礼宴会酒店",
          thumb: "/img/jiudian/2.jpg",
          tags: "私人订制",
        },
        {
          id: 3,
          num: "5.2km",
          desc: "金水区|农业路",
          price: "2088.00",
          title: "粤港中州国际饭店",
          thumb: "/img/jiudian/3.jpg",
          tags: "全新装修",
        },
        {
          id: 4,
          num: "8km",
          desc: "经开区|东开发区",
          price: "1299.00",
          title: "东府饭店",
          thumb: "/img/jiudian/4.jpg",
          tags: "宴会厅无柱",
        },
        {
          id: 5,
          num: "10km",
          desc: "管城回族区|金色港湾",
          price: "1999.00",
          title: "河南盛世民航国际酒店",
          thumb: "/img/jiudian/5.jpg",
          tags: "方正无柱大厅",
        },
      ],
    };
  },
};
</script>

<style>
.index .van-nav-bar__left .van-nav-bar__text {
  color: #d22c48;
  font-size: 16px;
  font-weight: 600;
}
.index .van-nav-bar .van-icon {
  color: #747171;
  font-weight: 400;
}
.index .van-tab__text--ellipsis {
  font-size: 13px;
}
.index .search {
  margin-top: 46px;
  padding: 0 10px;
}
.index .search .van-search {
  padding: 0 12px;
}
.index .search .van-field__left-icon {
  display: none;
}
.index .search .van-search__label {
  padding: 0 12px 0 0;
}
.index .search .van-search--show-action {
  border: 1px solid #d22c48;
  border-radius: 50px;
}
.index .search .van-search__content {
  background-color: #fff;
}
.index .body {
  margin-bottom: 50px;
  padding: 10px;
  background-color: #f8f8f8;
}
.index .body .tabs {
  margin-top: 10px;
}
.index .van-tabs__line {
  width: 20px;
}
.index .van-tab__pane {
  background-color: #fff;
}
.index .van-tab__pane .img {
  display: contents;
}
.index .van-tab__pane .img img {
  padding: 2px;
  width: 48%;
  border-radius: 5px;
}
.index .van-card__title {
  font-size: 15px;
  font-weight: bold;
}
.index .van-tabbar-item--active {
  color: red;
}
</style>